<template>
	<view class="contain">
		<view class="">
			<image style="width: 750rpx;" src="https://res.uxiao.vip/utea/letterBg.jpg" mode="widthFix"></image>
		</view>
		<view class="btn">
			<view class="word">
				<image style="width: 120rpx;" src="https://res.uxiao.vip/utea/word.png" mode="widthFix"></image>
			</view>
			<view class="btn_item" @click="goLetter">
				<view class="item_img">
					<image style="width:42rpx ;" src="https://res.uxiao.vip/utea/file.png" mode="widthFix"></image>
				</view>
				<view class="item_desc">
					历史记录
				</view>
			</view>
			<view class="btn_item ">
				<view class="item_img item_color">
					<text style="font-size: 38rpx; margin-right: 2rpx;">{{chance}}</text>次
				</view>
				<view class="item_desc word_color">
					告白机会
				</view>
			</view>
		</view>

		<view class="form">
			<u-card :show-head="false" :show-foot="false">
				<view class="" slot="body">
					<view class="item1">
						<view class="">
							To:
						</view>
						<view class="item_title">
							<u-input v-model="title" type="select" :disabled="true" @click="show = true" />
						</view>
					</view>
					<view class="item">
						告诉ta,你的身份:
					</view>
					<view class="sex">
						<view class="" @click="sex = 1">
							<view class="icon" :class="{active : sex == 1}">
								<image style="width: 100rpx;" src="@/static/images/nan.png" mode="widthFix"></image>
							</view>
						</view>
						<view class="" @click="sex = 2">
							<view class="icon" :class="{active1 : sex == 2}">
								<image style="width: 100rpx;" src="@/static/images/nv.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
					<view class="item">
						想对ta说的话:
					</view>
					<view class="item">
						<u-input border-color="#f9f0e7" placeholder="请输入你想对ta说的话~" v-model="text" :type="type"
							:border="border" :height="height" :auto-height="autoHeight" />
					</view>
					<view class="item emoj">
						<view class="">
							现在的心情:
						</view>
						<view class="right" @click="showMeoj">
							<!-- <view class="" style="margin-right: 20rpx;">
								动态表情
							</view> -->
							<image style="width: 60rpx;margin-right: 90rpx;"
								:src=" url || 'https://res.uxiao.vip/utea/emo.png'" mode="widthFix"></image>
							<!-- <view class="">
								<image style="width: 80rpx;" :src=" url || 'https://res.uxiao.vip/utea/emo.png'" mode="widthFix"></image>
							</view> -->
						</view>
					</view>
					<view class="item" @click="submit">
						<view class="submit">
							提交
						</view>
					</view>
				</view>
			</u-card>
		</view>
		<u-select v-model="show" value-name="id" label-name="name" mode="single-column" confirm-color="#298d67"
			:list="shopList" @confirm="selectShop"></u-select>
		<u-popup v-model="emojShow" mode="bottom" border-radius="14" height="510rpx">
			<view class="" style="padding: 15rpx;text-align: center;">
				<u-tabs :list="list" :show-bar="false" active-color="#298d67" :is-scroll="false" :current="current"
					@change="change"></u-tabs>
			</view>
			<view class="" v-show="current==0">
				<scroll-view scroll-y="true" style="height: 400rpx; width: 100%;" class="selectEmoj">
					<view class="image1">
						<image @click="selectImg(item)" style="width: 80rpx; margin: 15rpx;" :src="item.url"
							mode="widthFix" v-for="item in emojList" :key="item.id"></image>
					</view>
				</scroll-view>
			</view>
			<view class="" v-show="current==1" style="padding: 15rpx;">
				<u-upload ref="uUpload" max-count="1" :action="action" size-type="compressed" :auto-upload="true"
					:form-data="formData" @on-success="onSuccess"  @on-remove="remove" :before-upload="beforeUpload"
					@on-progress="onProgress"></u-upload>
				<!-- <view class="up" v-show="!ImageUrl" @click="userImg">
					<u-icon name="plus" color="#64666a" size="50"></u-icon>
					<view class="" style="color: #64666a; font-size: 24rpx;margin-top: 10rpx;">
						选择照片
					</view>
				</view>
				<view class="image" v-show="ImageUrl">
					<image @click="seeBig" style="width: 200rpx;height: 200rpx;" :src="ImageUrl" mode="aspectFill">
					</image>
					<u-icon @click="delimg" size="50" class="uicon" name="close-circle-fill" color="#fa3534"></u-icon>
				</view> -->
			</view>
		</u-popup>
	</view>
</template>

<script>
	import upload from '../api/upload';

	export default {
		data() {
			return {
				action: 'https://up.qiniup.com',
				formData: {
					token: '',
					key: ''
				},
				shopList: [],
				list: [{
						name: '选择表情'
					},
					{
						name: '自定义表情'
					},
				],
				show: false,
				title: '请选择邮寄店铺',
				value: 0,
				current: 0,
				emojShow: false,
				sex: 1,
				text: '',
				type: 'textarea',
				border: true,
				height: 200,
				autoHeight: true,
				emoj: "",
				url: '',
				emojList: [],
				lettres: [],
				chance: 0

			};
		},
		computed: {

		},
		onLoad() {
			this.getEmoj()
			this.getMyletter()
			this.getShop()

		},
		methods: {
			change(index) {
				this.current = index;
			},
			selectShop(e) {
				console.log(e);
				this.value = e[0].value;
				this.title = e[0].label;
			},
			async getShop() {
				let res = await this.apiPost('/shop/list')
				console.log(res);
				if (res.data.code == 1) {
					this.shopList = res.data.data
					// this.options1 = res.data.data

				} else {
					this.msg(res.data.msg)
				}
			},
			remove() {
				this.url = ''
				this.emoj = ''
			},
			async beforeUpload() {
				uni.showLoading({
					title: '上传中...',
					mask: true
				})
				let res = await this.upload('/get_qiniu_token')
				if (res.data.code == 1) {
					this.formData.key = 'utea/' + new Date().getTime(),
					this.formData.token = res.data.data.token
					return true
				}
				console.log(res);
				// await uni.request({
				// 	url: "https://udd.uxiao.vip/api.php/get_qiniu_token",
				// 	method: "POST",
				// 	success: (res) => {
				// 		console.log(res.data, 8989);
				// 		this.formData.key = 'utea/' + new Date().getTime(),
				// 		this.formData.token = res.data.data.token
				// 		console.log(this.formData);
				// 		setTimeout(()=>{
				// 			return true
				// 		},0)
				// 	}
				// })
			},
			onProgress(res) {
				uni.showLoading({
					title: '上传中...',
					mask: true
				})
				if (res.progress >= 100) {
					uni.hideLoading()
					this.emojShow = false
				}
				console.log(res, 88888);
			},
			chooseComplet() {
				console.log(1243);
				uni.showLoading({
					title: '上传中...',
					mask: true
				})
				uni.request({
					url: "https://udd.uxiao.vip/api.php/get_qiniu_token",
					method: "POST",
					success: (res) => {
						console.log(res.data, 8989);
						this.formData.key = 'utea/' + new Date().getTime(),
						this.formData.token = res.data.data.token
						console.log(this.formData);
						setTimeout(() => {
							this.$refs.uUpload.upload();
						}, 0)
					}
				})
			},
			onSuccess(data, index, lists, name) {
				console.log(data);
				let uurl = "https://res.uxiao.vip/" + data.key
				this.url = uurl
				this.emoj = uurl
				this.$forceUpdate()
			},
			selectCom(lists, name) {
				console.log(this.$refs.uUpload.lists);
				console.log(lists, name);
				uni.request({
					url: "https://udd.uxiao.vip/api.php/get_qiniu_token",
					method: "POST",
					success: (res) => {
						console.log(res.data);
						let token = res.data.data.token
						uni.uploadFile({
							url: 'https://up.qiniup.com',
							filePath: lists[0].url,
							name: 'file',
							formData: {
								'key': 'utea/' + new Date().getTime(),
								'token': token
							},
							success: (uploadFileRes) => {
								let uurl = "https://res.uxiao.vip/" + JSON.parse(uploadFileRes
									.data).key
								console.log(uurl)
								this.url = uurl
								this.emoj = uurl
							},
							fail: (err) => {
								console.log(err);
							},
							complete: () => {
								this.emojShow = false
							}
						})
					}
				})
			},
			goLetter() {
				uni.navigateTo({
					url: "/goods/letter/myLetters?letter=" + JSON.stringify(this.lettres)
				})
			},
			async submit() {
				// if(this.emoj == ''){
				// 	this.msg('请选择表情包')
				// 	return
				// }
				if (this.value == 0) {
					this.msg('请选择想要寄送的店铺')
					return
				}
				if (this.text == '') {
					this.msg('请输入你想说的话')
					return
				}
				let data = {
					text: this.text,
					sex: this.sex,
					emojo: this.emoj,
					destination: this.value
				}
				// console.log(data);
				// setTimeout(()=>{
				// 	this.text = '',
				// 	this.sex = 1,
				// 	this.title = '请选择邮寄店铺'
				// 	this.value = 0,
				// 	this.emoj = ''
				// 	this.url = ''
				// },2000)
				// return
				let res = await this.apiPost('/user/letter/send', data)
				console.log(res);
				if (res.data.code == 1) {

					uni.showToast({
						title: '投递成功!',
						icon: 'none',
						duration: 500,
						complete: (res1) => {
							uni.pageScrollTo({
								scrollTop: 0,
								duration: 500
							});
							console.log(res1, 222);
							setTimeout(() => {
								this.text = '',
									this.sex = 1,
									this.title = '请选择邮寄店铺'
								this.value = 0,
									this.emoj = ''
								this.url = ''

								this.getMyletter()
							}, 500);
						}
					});
				} else {
					this.msg(res.data.msg)
				}
			},
			async getMyletter() {
				let res = await this.apiPost('/user/letter/my_letter')
				console.log(res);
				if (res.data.code == 1) {
					this.chance = res.data.data.chance
					this.lettres = res.data.data.letter
				} else {
					this.msg(res.data.msg)
				}
			},
			selectImg(e) {
				this.emojShow = false
				this.url = e.url
				this.emoj = e.url
				this.$refs.uUpload.clear()
			},
			showMeoj() {
				this.emojShow = true
			},
			async getEmoj() {
				let res = await this.apiPost('/user/emojo/list')
				console.log(res);
				if (res.data.code == 1) {
					this.emojList = res.data.data
				} else {
					this.msg(res.data.msg)
				}
			}
		}
	}
</script>

<style lang="less">
	/deep/.u-dropdown__content__mask {
		// background: rgba(0, 0, 0, 0.0) !important;
	}


	.image {
		margin-left: 50rpx;
		width: 200rpx;
		height: 200rpx;
		position: relative;

		.uicon {
			position: absolute;
			top: 0;
			right: 0;
		}
	}

	.selectEmoj {
		padding: 20rpx;
		text-align: center;

		.image1 {
			padding: 20rpx;
			display: flex;

			flex-wrap: wrap;
		}
	}


	.contain {
		position: relative;

		.form {
			position: absolute;
			top: 1150rpx;
			left: 0;
			width: 100%;

			.item1 {
				margin-top: 40rpx;
				border-bottom: 1px solid #CCC;
				padding-bottom: 20rpx;
				display: flex;
				align-items: center;

				.item_title {
					flex: 1;
					padding: 0 20rpx;
					text-align: center;

					.u-input__input {
						color: #6a6c70 !important;
					}
				}
			}

			.item {
				margin-top: 40rpx;

				.u-input {
					background-color: #f9f0e7;
					border-radius: 10px;
				}

				.submit {
					margin: 0 auto;
					text-align: center;
					color: #fff;
					width: 80%;
					height: 80rpx;
					line-height: 80rpx;
					background-color: #298d67;
					border-radius: 40rpx;
				}
			}

			.emoj {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.right {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
			}

			.sex {
				margin-top: 40rpx;
				display: flex;
				justify-content: space-evenly;

				.icon {
					width: 100rpx;
					height: 100rpx;
					line-height: 100rpx;
					text-align: center;
					border-radius: 50%;
					background-color: #d2d2d2;
				}

				.active {
					background-color: #5fc6d9;
				}

				.active1 {
					background-color: #eb8eb6;
				}
			}
		}

	}

	.btn {
		position: absolute;
		right: 40rpx;
		top: 80rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-end;

		.btn_item {
			margin-top: 40rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.item_img {
				width: 100rpx;
				height: 100rpx;
				line-height: 100rpx;
				background-color: #398499;
				border: 3px solid #fff;
				border-radius: 50%;
				text-align: center;
			}

			.item_desc {
				width: 120rpx;
				height: 30rpx;
				line-height: 30rpx;
				margin-top: -28rpx;
				background-color: #fff;
				border-radius: 20rpx;
				color: #398499;
				font-size: 22rpx;
				font-weight: 700;
				letter-spacing: 2rpx;
				text-align: center;
			}

			.item_color {
				background-color: #3ea884;
				line-height: 80rpx;
				color: #fff;
			}

			.word_color {
				color: #3ea884;

			}
		}

	}
</style>